<script>
import {getToken, removeToken} from "@/utils/auth";
import {userLogOutService} from "@/api/user/UserService";
import {getCartCount} from "@/api/home/HomeService";

export default {
    props: {
        numS: {
            type: Number,
            default: 0
        }
    },
    components: {},
    data() {
        return {
            userName: this.$store.getters.userInfo.username,
            num: this.numS
        };
    },
    computed: {},
    watch: {},
    methods: {
        // 跳转到主页面
        toHome() {
            if(this.$route.path !== '/' || this.$route.path !== '/home') {
                this.$router.push("/");
            } else {
                window.location.reload();
            }
        },
        // 跳转到个人信息页面
        toUserInfo() {
            if(this.$route.path !== '/userInfo') {
                this.$router.push("/userInfo");
            } else {
                window.location.reload();
            }
        },
        // 跳转到 我的订单
        toMyOrder() {
            if(this.$route.path !== '/order') {
                this.$router.push("/order");
            } else {
                window.location.reload();
            }
            
        },
        // 跳转到 我的收藏
        toMyCollect() {
            if(this.$route.path !== '/collect') {
                this.$router.push("/collect");
            } else {
                window.location.reload();
            }
        },
        // 退出登录
        async toOutLogin() {
            let result = await userLogOutService();
            this.$notify({
                dangerouslyUseHTMLString: true,
                message: `<div style="font-size: 18px;font-weight: 800;">退出登录成功</div>`,
                type: "success"
            });
            // 清除token
            removeToken();
            await this.$router.push("/login");
        },
        // 跳转到登录页面
        toLogin() {
            this.$router.push("/login").catch(err => {console.log(err)});
        },
        toMyShopCar() {
            if(this.$route.path !== '/shopCar') {
                this.$router.push("/shopCar");
            } else {
                window.location.reload();
            }
        },
        // 获取购物车数量
        async InitCartCount() {
            let result = await getCartCount();
            await this.$store.dispatch("updateCartCount", result.data);
            this.num = result.data;
        },
    },
    created() {

    },
    mounted() {
        this.InitCartCount();
    },
}
</script>

<template>
    <div class="wrapper-header">
        <div class="header-left">
            <div class="sp" v-show="$route.path !== '/home'" @click="$router.push('/home')">首页</div>
            <div class="sp">消费者业务网站</div>
            <div class="sp">优购码</div>
            <div class="sp">企业商用</div>
            <div class="sp">Select Region</div>
            <div>
                <div class="sp">更多精彩</div>
            </div>
        </div>
        <div class="header-right">
            <div style="color: #fff; font-weight: 800;font-size: 15px" v-if="userName != null" class="sp" @click="toUserInfo">欢迎您,{{ userName }}</div>
            <div style="color: #fff; font-weight: 800" v-else class="sp" @click="toLogin">请登录</div>
            <div class="sp" @click="toLogin">注册</div>
            <div class="sp" @click="toMyOrder">我的订单</div>
            <div class="sp" @click="toMyCollect">我的收藏</div>
            <div class="sp">网站导航</div>
            <div class="sp">手机版</div>
            <div class="sp" @click="toOutLogin">退出登录</div>
            <div class="spp">
                <svg width="16" height="16" viewBox="0 0 1024 1024">
                    <path
                        d="M853.333 836.267c28.277 0 51.2 22.923 51.2 51.2s-22.923 51.2-51.2 51.2c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2zM320 836.267c28.277 0 51.2 22.923 51.2 51.2s-22.923 51.2-51.2 51.2c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2zM116.373 138.667c57.119 0 106.998 37.731 122.943 91.941l1.962 7.492 97.583 424.197c6.256 27.193 29.265 46.991 56.612 49.51l5.922 0.272h386.611c26.072 0 48.788-17.113 56.262-41.644l1.364-5.366 61.687-300.889c0.435-2.122 0.654-4.283 0.654-6.449 0-16.257-12.080-29.692-27.754-31.818l-4.357-0.293h-534.492c-17.673 0-32-14.327-32-32 0-16.2 12.039-29.589 27.658-31.708l4.342-0.292h534.492c53.081 0 96.111 43.030 96.111 96.111 0 4.323-0.292 8.638-0.872 12.916l-1.086 6.387-61.687 300.889c-11.205 54.653-57.697 94.559-112.762 97.926l-7.56 0.231h-386.611c-57.119 0-106.998-37.731-122.943-91.941l-1.962-7.492-97.583-424.197c-6.256-27.193-29.265-46.991-56.612-49.51l-5.922-0.272h-31.040c-17.673 0-32-14.327-32-32 0-16.2 12.039-29.589 27.658-31.708l4.342-0.292h31.040z"
                        fill="#fff" fill-opacity="1"></path>
                </svg>
                <div style="margin-left: 9px;" class="spap" @click="toMyShopCar">购物车（{{ num }}）</div>
            </div>
        </div>
    </div>
</template>


<style lang='scss' scoped>
.wrapper-header {
    position: relative;
    width: 100%;
    height: 35px;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    .header-left {
        position: relative;
        width: 30%;
        height: 100%;
        line-height: 35px;
        text-align: center;

        .sp {
            cursor: pointer;
            float: left;
            margin-left: 20px;
            text-align: center;
            position: relative;
            text-decoration: none;
            font-size: 12px;
            color: #718f99;
        }

        .sp:hover {
            color: #fff;
        }

        .sp::before {
            content: "";
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: -16%;
            background: #414141;
        }
    }

    .header-right {
        position: relative;
        width: auto;
        height: 100%;
        line-height: 35px;
        text-align: center;

        .sp {
            cursor: pointer;
            float: left;
            margin-left: 20px;
            text-align: center;
            position: relative;
            text-decoration: none;
            font-size: 12px;
            color: #718f99;
        }

        .sp:hover {
            color: #fff;
        }

        .sp::before {
            content: "";
            width: 1px;
            height: 10px;
            display: block;
            position: absolute;
            top: 13px;
            right: -25%;
            background: #414141;
        }

        .spp {
            position: relative;
            z-index: 10;
            color: #718f99;
            display: flex;
            align-items: center;
            margin-left: 20px;
            float: left;
            width: 100px;
            height: 100%;
            background: #424242;

            .spap {
                cursor: pointer;
                float: left;
                margin-left: 20px;
                text-align: center;
                position: relative;
                text-decoration: none;
                font-size: 12px;
                color: #718f99;
            }

            svg {
                margin-left: 5px;
            }
        }

        .spp:hover svg path {
            fill: #cf0a2c;
        }

        .spp:hover {
            
            background: #919290;
        }

        .spp:hover .spap {
            color: gold;
        }
    }
}
</style>
